<template>
	<view class="look-card">
		<u-navbar :title="title" :titleStyle="{ color: '#fff' }" leftIconColor="#fff" bgColor="transparent" @leftClick="goBack"></u-navbar>

		<image class="top-img" src="@/static/card-bg.jpg" mode="aspectFill"></image>
		
		<view class="container">
			<view class="card-box">
				<view class="info-box">
					<view class="info">
						<image class="avatar" :src="c_touxiang_img" mode="aspectFill"></image>
						<view class="content">
							<view class="name u-line-1">{{c_name}}</view>
							<view class="company u-line-1">{{c_work}}</view>
							<view class="job u-line-1">{{c_company}}</view>
						</view>
						<image class="credit" src="@/static/credit.png" mode="widthFix"></image>
					</view>
					<view class="data">
						<view class="item" v-if="c_phone">
							<u-icon name="phone-fill" color="#fff" size="36rpx"></u-icon>
							<view class="text">电话：{{c_phone}}</view>
						</view>
						<view class="item" v-if="c_email">
							<u-icon name="email-fill" color="#fff" size="36rpx"></u-icon>
							<view class="text">邮箱：{{c_email}}</view>
						</view>
						<view class="item" v-if="c_address || c_address_detail">
							<u-icon name="map-fill" color="#fff" size="36rpx"></u-icon>
							<view class="text u-line-1">地址：{{c_address}}{{c_address_detail}}</view>
						</view>
					</view>
				</view>
				<view class="edit-box">
					<view class="text">{{view_num}} 人浏览  </view>
				</view>
			</view>
			
			<view class="banner-box" @click="goGoods">
				<image class="image" :src="card_show_join_img" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCardInfo,cardViewLog,getConfig
	} from '../../../api/api';
	
	export default {
		data () {
			return {
				card_id:0,
				c_name: '',
				c_touxiang_img: '',
				c_company: '',
				c_work: '',
				c_phone: '',
				c_email: '',
				c_address: '',
				c_address_detail: '',
				view_num:0,
				card_show_join_img:'',
				title:''
			}
		},
		onLoad (options) {
			this.card_id = options.card
			if (options.regcode) {
				uni.setStorageSync('regcode', options.regcode)
			}

			this.getConfig();
		},
		onShow () {
			this.getData();
			this.cardViewLog();
		},
		methods: {
			getConfig() {
				getConfig().then(res => {
					if (res) {
						this.card_show_join_img = res.data.card_show_join_img
					}
				})
			},
			getData(){
				getCardInfo({ is_password: true, card_id: this.card_id }).then(res => {
					if (res) {
						var data = res.data
						this.cardId = data.id;
						this.c_name = data.c_name;
						this.title =data.c_name+"的信用名片";
						this.c_touxiang_img = data.c_touxiang_img;
						this.c_company = data.c_company;
						this.c_work = data.c_work;
						this.c_phone = data.c_phone;
						this.c_email = data.c_email;
						this.c_address = data.c_address;
						this.c_address_detail = data.c_address_detail;
						this.shareCode = data.shareCode;
						this.view_num =data.person_view_num;
						this.card_show_join_img =data.card_show_join_img;
					}
				})
			},
			cardViewLog(){
				cardViewLog({ card_id: this.card_id }).then(res => {
					if (res) {
						console.log(res)
					}
				})
			},
			goBack () {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goGoods () {
				uni.navigateTo({
					url: '/pages/index/goods'
				})
			}
		}
	}
</script>

<style lang="scss">
.look-card {
	min-height: 100%;
	background-color: #eef7f3;
	.top-img {
		width: 750rpx;
		height: 600rpx;
	}
	.container {
		margin-top: -352rpx;
		padding: 0 30rpx;
		position: relative;
		z-index: 10;
		color: #fff;
		.card-box {
			.info-box {
				box-sizing: border-box;
				height: 352rpx;
				padding: 34rpx 20rpx 20rpx;
				border: 1rpx solid #fff;
				border-bottom: none;
				border-radius: 22rpx 22rpx 0 0;
				background-color: rgba(0, 0, 0, 0.1);
				backdrop-filter: blur(20px);
				display: flex;
				flex-direction: column;
				.info {
					display: flex;
					.avatar {
						box-sizing: border-box;
						width: 142rpx;
						height: 142rpx;
						border-radius: 50%;
						border: 4rpx solid #fff;
					}
					.content {
						flex: 1;
						padding-top: 10rpx;
						margin: 0 20rpx;
						.name {
							font-size: 34rpx;
							font-weight: bold;
						}
						.company {
							margin-top: 10rpx;
							font-size: 24rpx;
						}
						.job {
							margin-top: 10rpx;
							font-size: 24rpx;
						}
					}
					.credit {
						width: 100rpx;
					}
				}
				.data {
					margin-top: auto;
					.item {
						display: flex;
						align-items: center;
						& + .item {
							margin-top: 10rpx;
						}
						.text {
							margin-left: 10rpx;
							font-size: 24rpx;
						}
					}
				}
			}
			.edit-box {
				height: 70rpx;
				padding: 0 28rpx;
				border-radius: 0 0 22rpx 22rpx;
				background: linear-gradient(90deg, #2dd145, #25bcce);
				.text {
					color: #fff;
					font-size: 28rpx;
					line-height: 70rpx;
					text-align: right;
				}
			}
		}
		.banner-box {
			margin-top: 24rpx;
			border-radius: 22rpx;
			overflow: hidden;
			.image {
				width: 100%;
			}
		}
	}
}
</style>
